<template>
	<view class="content" :style="{backgroundImage:'url('+domain+'/activity/static/blindBox/bg.png'+')'}">
		<cu-custom bgColor="" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>
		</cu-custom>
		<view class="notice-box" v-if="noticeList.length>0">
			<swiper :autoplay="true" :interval="3000" :duration="500" :disable-touch="true" :vertical="true"
				:circular="true">
				<swiper-item v-for="(item,index) in noticeList" :key="index">
					<view class="notice-box-item flex justify-between">
						<view class="basis-xl text-cut">
							用户 <text class="text-red">{{item.user_name}}</text> 刚刚抽取了一个{{item.gender==0?'男生':'女生'}}盲盒
						</view>
						<view class="basis-xs text-right text-cut">
							1分钟前
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="bg-box middle margin-top-sm  flex flex-direction">
			<image :src="domain+'/activity/static/blindBox/bg1.png'" mode="heightFix"></image>
			<view class="bg-box-text middle">完成订单即可获赠抽取机会一次</view>
		</view>
		<view class="extract-box margin-top flex justify-between">
			<view class="item flex flex-direction align-center"
				:class="[effect[0]?'jello-horizontal':'',effect1[0]?'jello-vertical':'']">
				<view class="top middle bg-top1">
					<view class="decorate1 round" id="decorate0">
					</view>
				</view>
				<view class="mask bg-top1 flex justify-center">
					<view class="decorate1 round">
					</view>
				</view>
				<view class="bottom flex align-center flex-direction padding-bottom background1">
					<image :src="domain+'/activity/static/blindBox/man.png'" mode="heightFix"></image>
					<view class="box-btn bg-1 margin-top middle" @click="clickkBillbox('put','0')">
						放入盲盒
					</view>
					<view class="box-btn bg-1 margin-top-sm middle" @click="clickkBillbox('extract','0')">
						抽取盲盒
					</view>
				</view>
				<view class="shadow-box margin-top">
				</view>
			</view>
			<view class="item flex flex-direction align-center"
				:class="[effect[1]?'jello-horizontal':'',effect1[1]?'jello-vertical':'']">
				<view class="top middle bg-top2">
					<view class="decorate2 round" id="decorate1">
					</view>
				</view>
				<view class="mask bg-top2 flex justify-center">
					<view class="decorate2 round">
					</view>
				</view>
				<view class="bottom flex align-center flex-direction padding-bottom background2">
					<image :src="domain+'/activity/static/blindBox/female.png'" mode="heightFix"></image>
					<view class="box-btn bg-1 margin-top middle" @click="clickkBillbox('put','1')">
						放入盲盒
					</view>
					<view class="box-btn bg-1 margin-top-sm middle" @click="clickkBillbox('extract','1')">
						抽取盲盒
					</view>
				</view>
				<view class="shadow-box margin-top">
				</view>
			</view>
		</view>

		<view class="box-bottom middle">
			<text @click="getLaunch">投放记录</text> | <text @click="getRecord">抽取记录</text>
		</view>

		<!-- 放入 -->
		<view class="cu-modal bottom-modal" v-if="modalName=='put'" :style="{zIndex:zIndex.model}"
			:class="modalName1=='put'?'show':''" @tap="hideModal" :animation="animationData">
			<view class="cu-dialog">
				<scroll-view scroll-y="true" class="scroll-view" @tap.stop="">
					<view class="top bg-white basis-xll text-left padding-tb">
						<text>放入一个{{formData.gender==0?'男生':'女生'}}盲盒</text>
					</view>
					<view class="input-box flex margin-top justify-between align-center" @click="changeSchool">
						<view class="basis-xl text-left text-cut">
							<text class="cuIcon-locationfill margin-right-xs"></text> {{areaname}}
						</view>
						<view class="cuIcon-right">

						</view>
					</view>
					<view class="input-box flex margin-top justify-between align-center text-left">
						<input type="text" value="" v-model="formData.wechat" placeholder="请输入您的微信号" />
					</view>
					<view class="input-box flex margin-top justify-between align-center text-left">
						<input type="text" value="" v-model="formData.desc" placeholder="请填写您的交友宣言" />
					</view>
					<view class="top bg-white basis-xll text-left justify-between flex padding-tb">
						<text>上传照片</text>
						<text class="again-box" @click="againUpload">重新上传</text>
					</view>
					<view class="blidbox middle">
						<image class="fade-in"
							:src="formData.image==''?domain+'/activity/static/blindBox/upload.png':formData.image"
							mode="aspectFill" v-if="uploadData.progress==0 || uploadData.progress>=100"
							@click="uploadImg"></image>

						<view class="basis-xl middle flex flex-direction" v-else>
							<view class="cu-progress radius striped active ">
								<view class="bg-cyan" :style="[{ width:uploadData.progress+'%'}]">
									{{uploadData.progress}}%
								</view>
							</view>
							<view class="text-gray text-xs margin-top-sm">
								上传中...
							</view>
						</view>
					</view>
					<view class="item-btn middle margin-top bg-white text-red text-sm text-bold" @click="put()">
						放入盲盒
					</view>
					<view class="item-btn middle bg-white text-gray text-sm text-bold top-sm" @click="hideModal()">
						取消
					</view>
				</scroll-view>
			</view>

		</view>

		<!-- 抽取效果 -->
		<view class="extrateModel fade-in" v-if="modalName=='extract'"
			:style="{top:d.top+'px',left:d.left+'px',zIndex:zIndex.model,backgroundImage:'url('+domain+'/static/img/error.png)'}"
			:animation="animationData">
		</view>
		<!-- 抽取 -->
		<view class="cu-modal" :class="modalName1=='extract'?'show':''" @tap="closeModal">
			<view class="cu-dialog" style="background-color: transparent;" @tap.stop="">
				<view class="extract middle flex flex-direction">
					<image class="extract-img" :src="blillBox.image" mode="heightFix"></image>
					<view class="info-box flex align-center flex-direction">
						<view class="head-item middle">
							抽到一个{{formData.gender==0?'男生':'女生'}}盲盒
						</view>
						<scroll-view scroll-y="true" class="body-itme">
							<view class="text-left">
								{{blillBox.desc}}
							</view>

						</scroll-view>
						<view class="bottom-item flex justify-between margin-top-sm">
							<view class="basis-xl text-cut text-left">微信号:{{blillBox.wechat}}</view>
							<view @click="copy(blillBox.wechat)" class="text-right basis-xs">一键复制</view>
						</view>
					</view>
					<view class="cuIcon-roundclose" @click="closeModal()">

					</view>
				</view>
			</view>
		</view>
		<!-- 投放 -->
		<view class="cu-modal bottom-modal" v-if="modalName=='launch'" :class="modalName1=='launch'?'show':''"
			@tap="hideModal" :animation="animationData">
			<view class="cu-dialog">
				<view class="" @tap.stop="">

					<scroll-view scroll-y="true" class="scroll-view bg-white">
						<view class="top bg-white basis-xll text-left padding-tb">
							<text>我的投放</text>
						</view>

						<view class="list-item flex align-center" v-for="(item,index) in myList" :key="index">
							<view class="left">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="right  flex  flex-wrap align-center">
								<view class="top-item text-left  flex">
									<view class="text-cut">{{item.area.area_name}} </view>丨 <view  :class="item.gender==0?'text-blue':'text-red'">
										{{item.gender==0?'男生':'女生'}}盲盒
									</view>
								</view>
								<view class="bottom padding-top-sm basis-xll flex justify-between">
									<view class="basis-df text-left">{{item.number}}人抽到</view>
									<view class="basis-df text-right">
										<text @click="edit(index)">编辑</text>
										<text class="margin-left" @click="del(index)">删除</text>
									</view>
								</view>

							</view>

						</view>

					</scroll-view>

				</view>


			</view>

		</view>

		<!-- 抽取记录 -->
		<view class="cu-modal bottom-modal" v-if="modalName=='record'" :class="modalName1=='record'?'show':''"
			@tap="hideModal" :animation="animationData">
			<view class="cu-dialog">
				<view class="" @tap.stop="">

					<scroll-view scroll-y="true" class="scroll-view bg-white">
						<view class="top bg-white basis-xll text-left padding-tb">
							<text>抽取记录</text>
						</view>

						<view class="list-item flex align-center" v-for="(item,index) in record" :key="index"   @click="openBox('extract',item.box)">
							<view class="left">
								<image :src="item.box.image" mode="aspectFill"></image>
							</view>
							<view class="right  flex  flex-wrap align-center">
								<view class="top-item text-left  flex">
									<view class="text-cut">{{item.box.area.area_name}} </view>丨 <view class="text-blue" :class="item.gender==0?'text-blue':'text-red'">
										{{item.gender==0?'男生':'女生'}}盲盒
									</view>
								</view>
								<view class="bottom padding-top-sm basis-xll flex justify-between">
									<view class="basis-xll text-left">{{item.box.created_at}}</view>
								
								</view>

							</view>

						</view>

					</scroll-view>

				</view>


			</view>

		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				title: "盲盒交友",
				domain: this.resDomain,
				modalName: null,
				modalName1: null,
				areaname: "",
				formData: {
					area_id: uni.getStorageSync('area_id'),
					wechat: "",
					gender: "",
					desc: "",
					image: '',
				},
				targetData: null,
				uploadData: {
					progress: 0,
				},
				serverUrl: this.apiHost + '/comm/imageUp',
				serverUrlDeleteImage: this.apiHost + '/comm/delupload',
				blillBox: null,
				noticeList: [],
				animationData: {},
				animation: null,
				effect: [false, false],
				effect1: [false, false],
				zIndex: {
					model: 1110,
				},
				d: {
					scale: 0.2,
					top: "",
					left: ''
				},
				myList: [],
				record:[]

			}
		},
		onShow() {
			
		},
		mounted() {
			this.changeAddress();
			this.animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease'
			});
			this.targetData = this.formData;
			this.formData.area_id = uni.getStorageSync("area_id");
		},
		methods: {
			//特效 放入
			putDown() {
				this.animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease'
				});
				this.effect[this.formData.gender] = false;
				let nextStep = (r) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#decorate' + this.formData.gender).boundingClientRect(data => {
						this.animation.translateY(-r.screenHeight * 0.7).step({
							duration: 200
						});
						let l = -r.screenWidth * 0.7 - data.left;
						if (this.formData.gender == 1) {
							l = r.screenWidth * 0.7 + (r.screenWidth * 0.7 - data.left);
						}
						this.animation.translateX(l).step({
							duration: 200
						});
						this.animation.translateY(r.screenHeight * 0.5).step({
							duration: 500
						});
						this.animationData = this.animation.export();

						setTimeout(() => {
							this.zIndex.model = 4;
						}, 600);
						setTimeout(() => {
							this.animation = {};
							this.animationData = {};
							this.finish();
						}, 1500);
					}).exec();

				}
				//获取入口的位置
				this.getInfo().then(r => {
					this.animation.scale(0.3, 0.3).step({
						duration: 500
					});
					nextStep(r);
				})
			},
			//抽取 特效
			extrate() {
				this.animation = uni.createAnimation({
					duration: 2000,
					timingFunction: 'ease-in'
				});
				this.effect1[this.formData.gender] = false;
				let nextStep = (r) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#decorate' + this.formData.gender).boundingClientRect(data => {
						this.d.top = data.top;
						this.d.left = data.left + 10;
						console.log(data);
						this.animation.translateY(-data.width * 0.4).step({
							duration: 500
						});
						this.animation.translateY(data.width * 0.01).step({
							duration: 1400
						});
						this.animation.translateY(-r.screenHeight).step({
							duration: 600
						});
						this.animationData = this.animation.export();
						setTimeout(() => {
							this.effect1[this.formData.gender] = true;
							this.$forceUpdate();
						}, 2200);

						setTimeout(() => {
							this.animation = {};
							this.animationData = {};
							this.modalName1 = this.modalName;
							this.modalName = null;
							this.zIndex.model = 1110;
							setTimeout(() => {
								this.effect1[this.formData.gender] = false;
							}, 900)
							this.$forceUpdate();
						}, 2500)
					}).exec();
				}
				//获取入口的位置
				this.getInfo().then(r => {
					nextStep(r);
				})
			},
			//结束
			finish() {
				this.effect[this.formData.gender] = true;
				setTimeout(() => {
					this.effect[this.formData.gender] = false;
				}, 900)
				this.$forceUpdate();
				this.zIndex.model = 1110;
				this.modalName = null;
				this.modalName1 = null;
			},

			//中奖列表
			getNotice() {
				this.apiRequest('/buyer/BoxStatus', {
					area_id: uni.getStorageSync('area_id')
				}, 0, 'get').then(res => {
					if (res.code == 200) {
						this.noticeList = res.data;
					}
				}, e => {

				});
			},
			//获取地点
			changeAddress() {
				
				this.apiRequest('/buyer/areaInfo', {
					area_id: this.formData.area_id
				}, 0).then(res => {
					if (res.code == 200) {
						this.getNotice();
						this.areaname = res.data.area_name; //位置信息
					} else {
						uni.showModal({
							title: "温馨提示",
							content: res.msg,
							showCancel: false,
							success: (e) => {
								if (e.confirm) {
									uni.navigateTo({
										url: '/pages/basic/position'
									})
								}
							}
						})
					}

				}, e => {
					uni.hideLoading();
					if (this.isLoading) {
						uni.showModal({
							content: "网络出错啦，请稍后再试",
							showCancel: false,
							success: () => {
								uni.stopPullDownRefresh();
							}
						})
					}
					this.loadStatus = "disconnection";
				});

			},

			hideModal(e) {
				this.modalName = null;
			},
			openBox(...dat){
				this.modalName1=dat[0];
				this.blillBox=dat[1];
				this.zIndex.model=9999;
			},
			update(area_id){
				this.formData.area_id = area_id;
				this.changeAddress();
				console.log("选择的校区 "+area_id);
			},
			
			closeModal() {
				
				this.zIndex.model = 1110;
				this.modalName = null;
				this.modalName1 = null;
			},
			clickkBillbox(type, gender) {
				if (this.zIndex.model == 4) {
					return false;
				}
				this.formData.gender = gender;
				switch (type) {
					case "extract":
						uni.showLoading({
							title: "抽取中..."
						})
						this.apiRequest('/buyer/BoxGet', {
							gender: this.formData.gender,
							area_id: uni.getStorageSync('area_id'),
						}, 1, 'POST').then(res => {
							if (res.code == 200) {
								this.blillBox = res.data;
								this.zIndex.model = 4;
								this.modalName = type;
								this.extrate();
							} else {
								setTimeout(() => {
									uni.hideLoading()
								}, 2000)
							}
						}, e => {
							this.showToast(e);
							setTimeout(() => {
								uni.hideLoading()
							}, 2000)
						})
						break;
					case "put":
						this.formData = this.targetData;
						this.modalName = type;
						setTimeout(() => {
							this.modalName1 = this.modalName;
						}, 100)
						break;
				}

			},
			//获取投放列表
			getLaunch() {
				this.apiRequest('/buyer/BoxList', {
					area_id: uni.getStorageSync('area_id'),
				}, 1, 'GET').then(res => {
					if (res.code == 200) {
						this.myList = res.data;
						this.modalName = "launch";
						setTimeout(() => {
							this.modalName1 = this.modalName;
						}, 100)
					}
				}, e => {
					this.showToast(e);
				})


			},
			getRecord(){
				this.apiRequest('/buyer/BoxHistory', {
					area_id: uni.getStorageSync('area_id'),
				}, 1, 'GET').then(res => {
					if (res.code == 200) {
						this.record = res.data;
						this.modalName = "record";
						setTimeout(() => {
							this.modalName1 = this.modalName;
						}, 100)
					}
				}, e => {
					this.showToast(e);
				})
			},
			del(index) {
				this.apiRequest('/buyer/BoxDel', {
					box_id: this.myList[index].box_id
				}, 1, 'DELETE').then(res => {
					if (res.code == 200) {
						this.myList.splice(index,1);
					}
				}, e => {

				})
			},
			edit(index) {

				this.formData = this.myList[index];
				this.modalName = 'put';
				console.log(this.formData);
				setTimeout(() => {
					this.modalName1 = this.modalName;
				}, 100)

			},

			//选择学校
			changeSchool() {
				uni.navigateTo({
					url: '/pages/basic/position?type=change',
					animationType: "none",
					success: () => {

					}
				});

			},
			copy(info) {
				uni.setClipboardData({
					data: info,
					success: function() {
						uni.showToast({
							title: "复制成功",
							icon: "success"
						})
					}
				});
			},
			//放入盲盒
			put() {
				let d = {},
					dat = this.formData;
				for (let u in dat) {
					let isPass = this.verify(u, dat);
					if (!isPass) {
						return false;
					}
					(u != "confrom_pass") ? d[u] = dat[u]: "";
				}

				this.apiRequest('/buyer/BoxPut', this.formData, 1).then(res => {

					if (res.code == 200) {
						this.putDown();
					}
				}, e => {
					this.showToast(e);
				})
			},
			/**
			 * 消失提示
			 * @param {Object} content
			 */
			showToast(content) {
				uni.hideLoading();
				uni.showToast({
					title: content,
					icon: "none"
				});

			},
			//验证
			verify(...dat) {
				let val = true,
					da = dat[1][dat[0]];
				switch (dat[0]) {
					case "wechat": //关于username的验证
						if (da.length == 0) {
							this.showToast("请输入你的微信号");
							val = false;
						}
						break;
					case "desc":
						if (da.length == 0) {
							this.showToast("请填写你的交友宣言");
							val = false
						}
						break;
					case "image":
						if (da == "") {
							this.showToast("请上传照片");
							val = false
						}
						break;

				}

				return val
			},
			//选择图片
			uploadImg() {
				uni.chooseImage({
					count: 1,
					success: (r) => {
						this.upload(r.tempFilePaths[0]);
					}
				})
			},
			//上传图片
			upload(path) {
				let upload = uni.uploadFile({
					url: this.serverUrl,
					fileType: 'image',
					name: 'upload-images',
					filePath: path,
					success: (uploadFile) => {
						if (uploadFile.statusCode == 200) {
							this.formData.image = uploadFile.data;
						} else {
							this.showToast("上传出错，请稍后再试")
						}
					},
					fail: (e) => {
						this.showToast("上传出错，请稍后再试");
					}
				});
				upload.onProgressUpdate((res) => {
					this.uploadData.progress = res.progress;
				})
			},
			//重新上传
			againUpload() {
				this.formData.image = "";
				this.uploadImg();
			}
		
		
		}




	}
</script>
<style>
	.show1 {
		opacity: 1;
		transform: scale(0.3, 0.3);
		-webkit-transform: scale(0.3, 0.3);
		/*兼容-webkit-引擎浏览器*/
		-moz-transform: scale(0.3, 0.3);
	}

	.cu-progress view {
		width: 0;
		height: 100%;
		align-items: center;
		display: flex;
		justify-items: flex-end;
		justify-content: space-around;
		font-size: 20upx;
		color: #ffffff;
		transition: width 0.6s ease;
	}

	.cu-progress {
		overflow: hidden;
		height: 28upx;
		background-color: rgba(114, 103, 108, 0.3);
		display: inline-flex;
		align-items: center;
		width: 100%;
	}

	.cu-progress+view,
	.cu-progress+text {
		line-height: 1;
	}

	.cu-progress text {
		align-items: center;
		display: flex;
		font-size: 20upx;
		color: #333333;
		text-indent: 10upx;
	}

	.cu-progress.striped view {
		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
		background-size: 72upx 72upx;
	}

	.cu-progress.active view {
		animation: progress-stripes 2s linear infinite;
	}

	@keyframes progress-stripes {
		from {
			background-position: 72upx 0;
		}

		to {
			background-position: 0 0;
		}
	}

	.jello-horizontal {
		-webkit-animation: jello-horizontal 0.9s both;
		animation: jello-horizontal 0.9s both;
	}

	@-webkit-keyframes jello-horizontal {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}

		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}

		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}

		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}

		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}

		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}

		100% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}

	@keyframes jello-horizontal {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}

		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}

		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}

		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}

		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}

		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}

		100% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}


	.scale-out-ver-bottom {
		-webkit-animation: scale-out-ver-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		animation: scale-out-ver-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	}

	@-webkit-keyframes scale-out-ver-bottom {
		0% {
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
			-webkit-transform-origin: 0% 100%;
			transform-origin: 0% 100%;
			opacity: 1;
		}

		100% {
			-webkit-transform: scaleY(0);
			transform: scaleY(0);
			-webkit-transform-origin: 0% 100%;
			transform-origin: 0% 100%;
			opacity: 1;
		}
	}

	@keyframes scale-out-ver-bottom {
		0% {
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
			-webkit-transform-origin: 0% 100%;
			transform-origin: 0% 100%;
			opacity: 1;
		}

		100% {
			-webkit-transform: scaleY(0);
			transform: scaleY(0);
			-webkit-transform-origin: 0% 100%;
			transform-origin: 0% 100%;
			opacity: 1;
		}
	}

	.jello-vertical {
		-webkit-animation: jello-vertical 0.9s both;
		animation: jello-vertical 0.9s both;
	}

	@-webkit-keyframes jello-vertical {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}

		30% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}

		40% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}

		50% {
			-webkit-transform: scale3d(0.85, 1.15, 1);
			transform: scale3d(0.85, 1.15, 1);
		}

		65% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}

		75% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}

		100% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}

	@keyframes jello-vertical {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}

		30% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}

		40% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}

		50% {
			-webkit-transform: scale3d(0.85, 1.15, 1);
			transform: scale3d(0.85, 1.15, 1);
		}

		65% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}

		75% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}

		100% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}

	.box-btn:active {
		transform: scale(0.98);
		box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
	}
</style>
<style lang="scss">
	.content {
		width: 100vw;
		$pw: calc(100vw*(20/750));
		$w: calc(100vw*(710/750));
		min-height: 100vh;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% auto;

		.notice-box {
			width: $w;
			height: calc(100vw*(73/750));
			border: 2rpx solid #E7435C;
			border-radius: 20rpx;
			padding: 0 50rpx;
			margin-left: $pw;

			swiper {
				height: calc(100vw*(69/750));

				swiper-item {
					height: inherit;
					font-size: calc(100vw*(24/750));
					font-weight: 500;
					color: #333333;
					line-height: calc(100vw*(69/750));
				}
			}

		}



		.bg-box {
			width: $w;
			height: calc(100vw*(620/750));
			margin-left: $pw;

			image {
				height: inherit;
			}

			.bg-box-text {
				width: $w;
				font-size: 24rpx;
				font-family: Muyao-Softbrush;
				font-weight: 400;
				color: #E7435C;
			}

		}

		.extract-box {
			width: $w;
			height: calc(100vw*(600/750));
			margin-left: $pw;

			.item {
				width: calc(100vw*(345/750));
				height: inherit;
				border-radius: 20rpx;
				position: relative;

				.top {

					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					width: inherit;
					height: calc(100vw*(120/750));

					.decorate1 {
						width: calc(100vw*(240/750));
						height: calc(100vw*(32/750));
						background-color: #1E3C7A;
						background: linear-gradient(0deg, rgba(0, 0, 0, 0.2));
					}

					.decorate2 {
						width: calc(100vw*(240/750));
						height: calc(100vw*(32/750));
						background-color: #A93838;
						background: linear-gradient(0deg, rgba(0, 0, 0, 0.2));
					}

				}

				.mask {
					position: absolute;
					width: calc(100vw*(345/750));
					top: calc(100vw*(40/750));
					height: calc(100vw*(60/750));
					z-index: 5;
					overflow: hidden;

					.decorate1 {
						margin-top: calc(100vw*(-16/750));
						width: calc(100vw*(240/750));
						height: calc(100vw*(32/750));
						background-color: #1E3C7A;
						background: linear-gradient(0deg, rgba(0, 0, 0, 0.2));
					}

					.decorate2 {
						margin-top: calc(100vw*(-16/750));
						width: calc(100vw*(240/750));
						height: calc(100vw*(32/750));
						background-color: #A93838;
						background: linear-gradient(0deg, rgba(0, 0, 0, 0.2));
					}
				}

				.bg-top1 {
					background-color: #3867C5;
				}

				.bg-top2 {
					background-color: #F56868;
				}

				.bottom {
					z-index: 5;
					width: inherit;
					height: calc(100vw*(480/750));
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;

					image {
						width: calc(100vw*(200/750));
						height: calc(100vw*(200/750));
						margin-top: 20rpx;
					}

					.box-btn {
						width: calc(100vw*(305/750));
						height: calc(100vw*(90/705));
						font-size: 28rpx;
						font-weight: 800;
						border-radius: 20rpx;

					}



					.bg-1 {
						color: #333333;
						background-color: #FEAF16;
						box-shadow: 0px 8rpx 0px 0px #FE8316;
					}

					.bg-2 {
						color: #FFFFFF;
						background: #A8A5A4;
						box-shadow: 0px 8rpx 0px 0px #929292;
					}
				}

				.background1 {
					background-color: #4C76CB;
				}

				.background2 {
					background-color: #F67777;
				}

				.shadow-box {
					width: 60%;
					height: calc(100vw*(30/750));
					background: #000000;
					opacity: 0.1;
					border-radius: 50%;
				}
			}

		}



		.box-bottom {
			width: inherit;
			height: calc(100vw*(144/750));
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;

			text {
				padding: 0 20rpx;
			}
		}


		.cu-dialog {
			width: 100vw;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			//放入盲盒 put
			.scroll-view {
				width: inherit;
				height: calc(100vh*(1460/1667));

				.top {
					font-size: 36rpx;
					font-weight: 800;
					color: #333333;
					padding: 30rpx;

					.again-box {
						font-size: 28rpx;
						font-weight: 500;
						color: #999999;
					}
				}

				.input-box {
					width: calc(100vw*(690/750));
					height: calc(100vw*(90/750));
					padding: 30rpx;
					margin: 20rpx 30rpx;
					background: #EBEBEB;
					border-radius: 20rpx;
					font-size: 28rpx;

					input {
						width: 100%;
					}

					.cuIcon-right {
						font-weight: 500;
						color: #333333;
						font-size: 25rpx;
					}
				}

				.blidbox {
					width: calc(100vw*(690/750));
					height: calc(100vw*(690/750));
					background: #EBEBEB;
					border-radius: 20rpx;
					margin: 0 30rpx;

					image {
						max-width: 100%;
						max-height: 100%;
					}
				}

				.item-btn {
					width: inherit;
					height: calc(100vw*(100/750));
				}

				.top-sm {
					margin-top: 4rpx;
				}

				//列表
				.list-item {
					width: calc(100vw*(690/750));
					height: calc(100vw*(180/750));
					background: #EBEBEB;
					border-radius: 20rpx;
					margin-top: calc(100vw*(20/750));
					margin-left: calc(100vw*(30/750));
					padding: calc(100vw*(30/750));

					.left {
						width: calc(100vw*(120/750));
						height: calc(100vw*(120/750));

						image {
							width: inherit;
							height: inherit;
							border-radius: 20rpx;
						}
					}

					.right {
						width: calc(100vw*(540/750));
						height: calc(100vw*(120/750));
						margin-left: calc(100vw*(30/750));

						.top-item {
							width: calc(100vw*(480/750));
							font-size: 32rpx;
							font-weight: 800;
							color: #333333;

							.text-cut {
								max-width: calc(100vw*(480/750)*0.6);

							}
						}

					}




				}




			}




			//抽取盲盒 extrCT
			.extract {
				.extract-img {
					max-width: calc(100vw*(690/750));
					height: calc(100vw*(690/750));
					border-radius: 20rpx;
				}

				.info-box {
					width: calc(100vw*(630/750));
					max-height: calc(100vw*(421/750));
					background: #FFFFFF;
					border-radius: 20rpx;
					margin-top: calc(-100vw*(98/750));
					padding-bottom: 45rpx;
					z-index: 9;

					.head-item {
						width: inherit;
						height: calc(100vw*(98/750));
						font-size: 36rpx;
						font-weight: 800;
						color: #F67777;

					}

					.body-itme {
						width: calc(100vw*(561/750));
						max-height: calc(100vw*(215/750));
						background: #F7F7F7;
						border-radius: 20rpx;
						padding: 35rpx 24rpx;
					}

					.bottom-item {
						width: calc(100vw*(561/750));
						font-size: 24rpx;
						font-weight: 800;
						color: #333333;
					}
				}

				.cuIcon-roundclose {
					font-size: 48rpx;
					color: white;
					margin-top: 68rpx;
				}

			}



		}

		.extrateModel {
			width: calc(100vw*(200/750));
			height: calc(100vw*(200/750));
			background-color: white;
			z-index: 4;
			position: fixed;
			border-radius: 20rpx;
			background-repeat: no-repeat;
			background-size: cover;
		}


	}
</style>
